<template>
	<view class="link-search">
		<!-- 搜索框 -->
		  <view class="search-warp">
			  <view class="search-input">
			  	<view class="search-input-value">
			  		<view class="search"><image  src="https://www.innovationgloble.com/wxs/img/wx/kcxcx/img/export/search.png"></image></view>
			  		<input  confirm-type="search" @confirm="inputLink()"  v-model.trim="params.keyWord" 
					placeholder-style="color:#A3A3A3;font-size:28upx;"  placeholder-class="search-placehoder" 
					placeholder="搜索聊天记录" type="text" :focus="showFocus">
			  		<icon @click.stop="handleClearValue" v-show="isShowDeleate" class="delete" type="clear" size="16"/>
			  	</view>
			    <view @click="inputLink()" class="search-text" >
			  	   搜索  
			     </view>
			  </view>
		  </view>
		  <!-- 联系人内容 -->
		  <view class="link-warp" v-for="(item,key) in currentData" :key="key">
			  <view class="link-item" @click="goChat(item)">
				  <view class="link-item-l">
					   <image v-if="item.fromId==params.fromId"  :src="accountHeadSelf"></image>
					  <image v-else :src="accountHead"></image>
				  </view>
				  <view :class="key!==currentData.length-1?'link-item-r line':'link-item-r'" >
                       <view class="link-item-r-1">
					     <view class="link-item-r-name"v-if="item.fromId==params.fromId">{{userInfo.realName}}</view>
						 <view class="link-item-r-name" v-else>{{realName}}</view>
					     <view class="link-item-r-time">{{formatDate(item.sendTime)}}</view>
					   </view>
                      <view class="link-item-r-2" >{{parseData(item.content).value}}</view>
				  </view>
			  </view>
		  </view>
		  <view class="no-data" v-show="total===0">
		  	<view class="no-data-image">
		  		<image src="https://www.innovationgloble.com/wxs/img/wx/empty-data.png"></image>
		  	</view>
		  	<view class="no-data-text">抱歉，暂无匹配结果</view>
		  </view>
	</view>
</template>

<script>
	import moment from 'moment';
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		name:'chat-content-search',
		data(){
			return {
				showFocus:true,
				isShowDeleate:false,
				params:{
					fromId:'',
					toId:'',
					keyWord:'',
					pageNum:1,
					pageSize:12
				},
				realName:'',
				accountHead:'',
				currentData:[],
				isLastPage:true,
				accountHeadSelf:'',
				total:1,
				type:''
			}
		},
		computed:{
			...mapState('userStore', ['userInfo'])
		},
		onLoad(option) {
			this.params.fromId = option.fromId;
			this.params.toId = option.toId;
			this.realName = option.realName;
			this.accountHead = option.accountHead;
			this.accountHeadSelf = option.accountHeadSelf;
			this.type = option.type;
			console.log('消息列表',option,this.userInfo)
		},
		onReachBottom() {
			if(!this.isLastPage){
				this.params.pageNum = this.params.pageNum + 1;
				this.fetchData()
			}
		},
		methods:{
			...mapMutations('chatStore', ['setCurrentPerson']),
			 parseData(val){
				if(this.type == undefined)
					return JSON.parse(val)||val 
				else
					return {value:val};
			 },
			 formatTen(num) { 
			            return num > 9 ? (num + "") : ("0" + num); 
			 },
			 formatDate(date) { 
			            var date = new Date(moment(date).format())
			            var year = date.getFullYear(); 
			            var month = date.getMonth() + 1; 
			            var day = date.getDate(); 
			            var hour = date.getHours(); 
			            var minute = date.getMinutes(); 
			            var second = date.getSeconds(); 
			            return year + "-" + this.formatTen(month) + "-" + this.formatTen(day)+ " " +this.formatTen(hour)+ ":" +this.formatTen(minute)+ ":" +this.formatTen(second);
			 },
			//重置当前数据
			resetData(){
				this.params.pageNum = 1;
				this.currentData = []
			},
			goChat(item) {
				uni.navigateBack({
					
				})
				
			},
			//搜索
			search(){
				
			},
			handleClearValue(){
				this.params.keyWord = '';
			},
			//搜索聊天记录
			inputLink(){
				this.resetData()
				if(this.params.keyWord===''){
					uni.showToast({
						icon: "none",
						title:'请输入关键词'
					})
					return false
				}
			   this.fetchData();
				
			},
			fetchData(){
				uni.showNavigationBarLoading()
				uni.showLoading({
				    title: '数据读取中'
				});
				let url = 'im/get_histrecord';
				if(this.type != undefined)
				{
					url = 'expertMsg/getHistory';
					if(this.type =='0')
					{
						this.params.expertInfoId = this.params.toId;
						this.params.userInfoId = this.params.fromId;
					}
					else{
						this.params.expertInfoId = this.params.fromId;
						this.params.userInfoId = this.params.toId;
					}
				}
					
				this.$request.get({
						 url:url,
						 data:this.params
				}).then(res=>{
						if(this.type != undefined){
							let list = [];
							for(let i=0;i<res.list.length;i++)
							{
								if(this.type == '0')
									list.push({
										fromId:res.list[i].userInfoId,
										toId:res.list[i].expertInfoId,
										content:res.list[i].note,
										sendTime:res.list[i].createDate
									});
								else
									list.push({
										fromId:res.list[i].expertInfoId,
										toId:res.list[i].userInfoId,
										content:res.list[i].note,
										sendTime:res.list[i].createDate
									});
							}
							this.currentData = this.currentData.concat(list)
							this.total = res.total
							this.isLastPage = res.isLastPage
						}
						else{
							this.currentData = this.currentData.concat(res.messageList.list)
							this.total = res.messageList.total
							this.isLastPage = res.messageList.isLastPage
						}
						
						 uni.hideNavigationBarLoading()
						 uni.hideLoading()
				})
			}
			
		},
		watch:{
			//监听输入框值
			'params.keyWord'(val){
				if(val===''){
					this.isShowDeleate=false
				}else{
					this.isShowDeleate=true
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.link-search {
		background-color: #F5F5F5;
		min-height: 100vh;
		.search-warp {
			padding: 18upx 32upx 30upx 32upx;
			background-color: #F2F2F2;
			.search-input {
				display: flex;
				height: 78upx;
				.search-input-value {
					flex: 1;
					height: 78upx;
					background:#fff;
					border-radius:6upx;
					position: relative;
					.search {
						width: 32upx;
						height: 34upx;
						position: absolute;
						left: 20upx;
						top: 48%;
						transform: translateY(-50%);
						z-index: 999;
						image {
							width: 32upx;
							height: 34upx;
						}
					}
					.delete {
						width: 28upx;
						height: 28upx;
						position: absolute;
						right: 20upx;
						top: 50%;
						transform: translateY(-50%);
						z-index: 999;
					}
					input {
						height: 78upx;
						border-radius:6upx;
						font-size:28upx;
						padding-left: 72upx;
					}
				}
				
				.search-text {
					width: 88upx;
					height: 78upx;
					line-height: 78upx;
					text-align: right;
					font-size:28upx;
					font-weight:400;
					color:#486B9D;
				}
			}
		}
		.link-warp {
			box-sizing: border-box;
			padding-left: 32upx;
			background-color: #fff;
			.link-item {
				display: flex;
				justify-content: space-around;
				height: 144upx;
				line-height: 144upx;
				align-items: center;
				.link-item-l {
					width: 84upx;
					image {
						width: 84upx;
						height: 84upx;
						border-radius: 50%;
						vertical-align: middle;
					}
				}
				.link-item-r {
					flex: 1;
					margin-left: 18upx;
					height: 144upx;
					line-height: 144upx;
					align-items: center;
					padding: 22upx 32upx 28upx 0;
					.link-item-r-1 {
						line-height:42upx;
						margin-bottom: 6upx;
						display: flex;
						justify-content: space-between;
						.link-item-r-name {
							font-size:26upx;
							font-family:PingFangSC-Semibold,PingFang SC;
							font-weight:600;
							color:rgba(68,68,68,1);
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.link-item-r-time {
							font-size:22upx;
							font-family:PingFangSC-Regular,PingFang SC;
							font-weight:400;
							color:rgba(197,196,196,1);
							line-height:32upx;
						}
					}
					.link-item-r-2 {
						font-size:26upx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:#888787;
						line-height:36upx;
						width: 600upx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.line {
					border-bottom: 1upx solid #EBEBEB;
				}
			}
		
		}
		.no-data {
			width: 100%;
			height: 340upx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0 4upx 22upx 0 rgba(0, 0, 0, 0.03);
			box-sizing: border-box;
			padding-top: 62upx;
			.no-data-image {
				width: 172upx;
				height: 148upx;
				margin: 0 auto;
		
				image {
					width: 172upx;
					height: 148upx;
					z-index: 999;
				}
			}
		
			.no-data-text {
				text-align: center;
				font-size: 26upx;
				font-weight: 400;
				color: rgba(163, 163, 163, 1);
				margin-top: 16upx;
			}
		}
		
	}
</style>
